<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局 原生JS</title>
    <link rel="stylesheet" href="css/waterFall.css">
    <script src="js/waterFall.js"></script>
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/0.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/10.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/11.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/12.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/13.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/14.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/15.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/16.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/17.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/18.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/19.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/20.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/21.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/22.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/23.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/24.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/25.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/26.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/27.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/28.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/29.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/30.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/31.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/32.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/33.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/34.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/35.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/36.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/37.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/38.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/39.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/waterFall/40.jpg">
        </div>
    </div>
</div>
</body>
</html>

